<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas演示</title>
	</head>
	<body>
		<canvas id="myCanvas" width="300" height="300" style="border: solid 2px black;">
			您的浏览器不支持 HTML5 canvas标签
		</canvas>
		<script>
			var c= document.getElementById("myCanvas");
			var ctx=c.getContext("2d");
		    ctx.strokeStyle="#FF0000";
//			ctx.moveTo(0,0);
//			ctx.lineTo(300,200);
//			ctx.stroke();		
			ctx.beginPath();
			ctx.arc(95,50,40,0,2*Math.PI);
			ctx.stroke();
			ctx.beginPath();
			ctx.arc(80,40,10,0,2*Math.PI);
			ctx.stroke();
			ctx.beginPath();
			ctx.arc(110,40,10,0,2*Math.PI);
			ctx.stroke();
			ctx.strokeStyle="red";
			ctx.strokeRect(80,90,30,60);
			ctx.stroke();
			ctx.strokeStyle="red";
			ctx.strokeRect(85,150,10,60);
			ctx.stroke();
			ctx.strokeStyle="red";
			ctx.strokeRect(96,150,10,60);
			ctx.stroke();
			ctx.strokeStyle="red";
			ctx.strokeRect(110,90,60,10);
			ctx.stroke();
			ctx.strokeStyle="red";
			ctx.strokeRect(110,110,60,10);
			ctx.stroke();
			ctx.strokeStyle="red";
			ctx.strokeRect(90,70,10,10);
			ctx.stroke();
		</script>
	</body>
</html>

